<!-- 指定单元的全景图显示，全景图片由外部调用组件传入； -->
<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="displayModuleTitle"
    width="960px"
    :minHeight="540"
    :default-fullscreen="false"
    :showCancelBtn="false"
    :showOkBtn="false"
    :footer="null"
    :centered="true"
  >
    <!-- <template #footer> </template> -->
    <!-- <VideoPlayer
      v-if="fileId && fileId > 0x0"
      :key="fileId"
      :fileId="fileId"
      :src="getVideoFileUrl"
    ></VideoPlayer> -->
    <video-player
      v-if="fileId && fileId > 0x0"
      class="video-player vjs-custom-skin"
      :src="getVideoFileUrl"
      controls
      :loop="true"
      :volume="0.6"
    ></video-player>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, unref, computed, onMounted, onUnmounted } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  // import VideoPlayer from '/@/components/QuCheng/VideoPlayer.vue';

  //导入vue3-video-player
  import { VideoPlayer } from '@videojs-player/vue';
  import 'video.js/dist/video-js.css';

  import { QcUnifyTransToChildProps } from '/#/QcUnify';
  import { displayTitle } from '/@/utils/QcUnifyUtil';
  import { useGlobSetting } from '/@/hooks/setting';
  import { getFileApi } from '/@/api/platform/file';

  export default defineComponent({
    name: 'UnitVideoViewModal',
    emits: ['register', 'success', 'close'],
    components: { BasicModal, VideoPlayer },
    setup(props, { emit }) {
      console.log('UnitVideoViewModal setup props', props);

      const { uploadUrl } = useGlobSetting();
      const qcUnifyProps = ref<QcUnifyTransToChildProps>();
      const getVideoFileUrl = ref<string>(uploadUrl + getFileApi);
      const fileId = ref<number>(0x0);

      let displayModuleTitle = computed(() => {
        return displayTitle(qcUnifyProps.value);
      });

      /**
       * 根据父组件传递过来的参数获取对应的操作，操作不同所对应的界面不同
       */
      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        if (data != undefined && data != null) {
          console.log('registerModal data', data);
          let unrefData = unref(data);
          qcUnifyProps.value = unrefData;
          fileId.value = Number.parseInt(unrefData.dataId); //dataId中传入的是图片url属性，实际是文件ID
          console.log('registerModal fileId.value', fileId.value);
          //测试发现指定mp4文件的url时播放器无法加载，提示文件类型错误；需要静态文件url
          // getVideoFileUrl.value = uploadUrl + getFileApi + unrefData.dataId;
          // getVideoFileUrl.value =
          //   'http://localhost:3100' + uploadUrl + getFileApi + unrefData.dataId;
          //测试
          getVideoFileUrl.value = '/ehs/videos/ltz.mp4';
          console.log('getVideoFileUrl=' + getVideoFileUrl.value);
        }
      });

      onMounted(() => {
        console.log('UnitVideoViewModal onMounted');
      });

      onUnmounted(() => {
        console.log('UnitVideoViewModal onUnmounted');
      });

      return {
        displayModuleTitle,
        registerModal,
        getVideoFileUrl,
        fileId,
      };
    },
  });
</script>

<style scoped></style>
